<template>
  <div>
    <el-dialog :visible.sync="dialog" :before-close="handleClickCancel" title="退款详情" width="580px">
      <el-form :model="dialogData">
        <el-form-item :label-width="formLabelWidth" label="退款人">
          <el-input :disabled="true" v-model="dialogData.userName" style="width:350px;"/>
          <el-button type="text" @click="handleClickPush(dialogData.userId)">个人主页</el-button>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="退款申请时间">
          <el-input :disabled="true" v-model="dialogData.createTimeStr" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="退款理由">
          <el-input :disabled="true" v-model="dialogData.reasonNote" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="订单号">
          <el-input :disabled="true" v-model="dialogData.orderId" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="商品名称">
          <el-input :disabled="true" v-model="dialogData.targetName" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="订单价格">
          <el-input :disabled="true" v-model="dialogData.amount" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="付款时间">
          <el-input :disabled="true" v-model="dialogData.orderEndTimeTimeStr" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="处理状态">
          <el-input :disabled="true" v-model="dialogData.status" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="处理时间">
          <el-input :disabled="true" v-model="dialogData.updateTimeStr" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="退款总额">
          <el-input :disabled="true" v-model="dialogData.actualAmount" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="反馈信息">
          <el-input :disabled="true" v-model="dialogData.memo" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="处理人">
          <el-input :disabled="true" v-model="dialogData.operatorName" style="width:350px;"/>
          <el-button type="text" @click="handleClickPush(dialogData.operatorId)">个人主页</el-button>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClickCancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    formLabelWidth: {
      type: String,
      default: '120px'
    }
  },
  data() {
    return {
      activeName: '1'
    }
  },
  methods: {
    // 向父组件事件changeVisiable和布尔值false 父组件用@changeVisiable接收事件 并触发父组件的一个函数 @changeVisiable="changeVisiable"
    handleClickCancel() {
      this.$emit('Visiable', false)
    }
  }
}
</script>

<style lang="scss">
</style>
